<template>
  <el-card shadow="never">
    <grid-layout
      ref="gridlayout"
      v-model:layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="false"
      :vertical-compact="true"
    >
      <grid-item
        :key="item.i"
        v-for="(item,index) in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        <template v-if="'container' === item.category">
          <component
            ref="fieldRef"
            :is="getFieldWidget(item)"
            v-model:widget="layout[index]"
            :fileName="fileName"
            v-model:setting="setting"
            :draggable = "false"
          ></component>
        </template>
        <template v-else>
          <component
            ref="fieldRef"
            :is="getFieldWidget(item)"
            :widget="item.config"
            :fileName="fileName"
            @getData="getAllData"
          ></component>
        </template>
      </grid-item>
    </grid-layout>
  </el-card>
</template>
<script>
//局部批量注册组件
const requireAll = require.context("./components/", true, /\.vue$/);
const componentsObj = {};
let arr = [];
const modulList = requireAll.keys().map((item) => requireAll(item));
modulList.forEach(({ default: modulObj }) => {
  componentsObj[modulObj.__name] = modulObj;
  arr.push(modulObj.__name);
});
export default {
  components: componentsObj, //注册所有相关组件
  data() {
    return {
      comList: arr,
    };
  },
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import API from "@/api/model/meta";
const route = useRoute();
const fieldRef = ref([]);
const fileName = ref();
const layout = ref([]);
onMounted(() => {
  getInit();
});
const getAllData = (val) => {
  fieldRef.value.forEach((ele) => {
    if (ele.changeOption) {
      ele.changeOption(val);
    }
    if (ele.getTableData) {
      ele.getTableData(val);
    }
  });
};
const getInit = async () => {
  let res = await API.blockDesigner.readBlocksFile.post({ id: route.query.id });
  if (res.code == "200") {
    if (res.fileContent) {
      layout.value = JSON.parse(res.fileContent);
    }
    fileName.value = res.reportFileName;
  }
};
const getFieldWidget = (item) => {
  return item.type + "-widget";
};
</script>
<style lang="less" scoped>
</style>